<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>购买记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 头部搜索 -->
      <el-row :gutter="10">
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <el-form label-width="80px">
              <el-form-item label="邮箱：">
                <el-input
                  v-model="queryinfo.userEmail"
                  clearable
                  placeholder="请输入邮箱"
                  @clear="getmsgList"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <el-form label-width="80px">
              <el-form-item label="手机号：">
                <el-input
                  v-model="queryinfo.userTel"
                  clearable
                  placeholder="请输入手机号"
                  @clear="getmsgList"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-button type="primary" icon="el-icon-search" @click="getmsgList"
          >搜索</el-button
        >
      </el-row>
      <!-- 审核数据列表 -->
      <template>
        <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="id" label="ID" width="80"> </el-table-column>
          <el-table-column prop="user_tel" label="手机号"> </el-table-column>
          <el-table-column prop="user_email" label="邮箱"> </el-table-column>
          <el-table-column prop="sl" label="算力（T）"> </el-table-column>
          <el-table-column prop="gm_num" label="购买金额（USDT）"> </el-table-column>
          <el-table-column prop="gm_num_fil" label="购买金额（FIL）"> </el-table-column> 
          <el-table-column prop="sl_name" label="合约名称"> </el-table-column>
          <el-table-column prop="hy_deadline" label="合约期限"> </el-table-column>
          <el-table-column prop="" label="状态">
            <template slot-scope="scope"> 
              <span v-if="scope.row.is_redeem===1" style="color:green">进行中</span>
              <span v-else-if="scope.row.is_redeem===2" style="color:red">已结束</span>
              <span v-else>未开始</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="购买时间"></el-table-column>
        </el-table>
      </template>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryinfo: {
        userTel: "",
        userEmail: "",
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
    };
  },
  created() {
    this.getmsgList();
  },
  methods: {
    // 获取购买记录列表getGoodsOrderList
    async getmsgList() {
      const { data: res } = await this.$http.post(
        "currencyAudit/getGoodsOrderList",
        this.httputil(this.queryinfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.tableData = res.data.list;
      this.total = res.data.count;
    },
    // 页面数量发生改变
    handleSizeChange(newSize) {
      this.queryinfo.pageSize = newSize;
      this.getmsgList();
    },
    // 页数发生改变
    handleCurrentChange(newCurrent) {
      this.queryinfo.pageIndex = newCurrent;
      this.getmsgList();
    },
  },
};
</script>
